<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商家注册</title>
	</head>
    <style type="text/css">
        .text-title {
            width: 90%;
            margin-left: 5%;
            height: 60px;
            line-height: 60px;
            font-weight: 600;
            margin-top: 50upx;
            font-size: 14px;
        }

        .input-box {
            width: 90%;
            margin-left: 5%;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ededed;
        }

        input {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 14px;
            /* 	border: 0; // 去除未选中状态边框
            outline: medium;
            background-color: rgba(0, 0, 0, 0); // 透明背景 */
            background: none;
            border: none;
            outline: none;
            display: black;
        }

        .my-address {
            text-align: center;
            font-size: 14px;
        }

        .choose-fun {
            width: 90%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-left: 5%;
            border-radius: 20px;
            background: #FDA544;
            margin-top: 50px;
        }
    </style>
	<body>
    <div id="sure">
		<div class="text-title">店名</div>
		<div class="input-box">
			<input type="text" placeholder=""  v-model="formData.store_name" class="text-input">
		</div>
		<div class="text-title">账号（电话号码）</div>
		<div class="input-box">
			<input type="text" placeholder="" v-model="formData.phone" class="text-input">
		</div>
		<div class="text-title">设置密码</div>
		<div class="input-box">
			<input type="password" placeholder="" v-model="formData.password" class="text-input">
		</div>
		<div class="text-title">负责人</div>
		<div class="input-box">
			<input type="text" placeholder="" v-model="formData.store_username" class="text-input">
		</div>
		<div class="text-title">省市</div>
		<div class="input-box">
            <input type="text" placeholder="" v-model="formData.city" class="text-input">
		</div>
		<div class="text-title">区域</div>
		<div class="input-box">
            <input type="text" placeholder="" v-model="formData.area" class="text-input">
		</div>
		<div class="text-title">详细地址</div>
		<div class="input-box">
            <input type="text" placeholder="" v-model="formData.detail_address" class="text-input">
		</div>
		<div class="choose-fun" @click="nextstep">确定</div>
    </div>
	</body>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="./vue.js"></script>
    <!--    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
    <script type="text/javascript">
        new Vue({
            el: "#sure",
            data: {
                formData:{
                    store_name:'',
                    store_username:'',
                    city:'四川省绵阳市',
                    detail_address:'',
                    phone:'',
                    password:'',
                    area:'',
                }
            },
            methods:{
                showToast:function(msg,duration,isreload){
                    duration=isNaN(duration)?3000:duration;
                    var m = document.createElement('div');
                    m.innerHTML = msg;
                    m.style.cssText="width:60%; min-width:180px; background:#000; opacity:0.6; height:auto;min-height: 30px; color:#fff; line-height:30px; text-align:center; border-radius:4px; position:fixed; top:60%; left:20%; z-index:999999;";
                    document.body.appendChild(m);
                    setTimeout(function() {
                        var d = 0.5;
                        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                        m.style.opacity = '0';
                        setTimeout(function() { document.body.removeChild(m) }, d * 2000);
                        isreload&&window.location.reload();
                    }, duration);
                },
                nextstep:function () {
                    $.ajax({
                        url:'/dinggoapi/dog/merreg',
                        type:'POST',
                        data:this.formData,
                        success: (res)=> {
                            if(res.status_code!=2000) {
                                this.showToast(res.message,1000,false);
                                return ;
                            }
                            this.showToast(res.message,1000,true);
                        }
                    });
                }
            }
        });
    </script>

</html>
